How I Created This Site

I recently rebuilt my website with the goal of creating something easier to work with, faster, sleeker, and more future-proof than my previous site. While I’m not sure what future-proofing entails, I believe that’s the point. In this post, I’ll share the obstacles I faced while building the website and point to resources that helped me overcome technical challenges. It took me about two weeks to build the site, and throughout the process, I relied on numerous blog posts, videos, and documentation. I hope my experience can be helpful to others.

My previous website was built on React, AWS (Route 53, S3, Cloudfront), and was somewhat of a nightmare. Images were stored in an S3 bucket and manually placed in folders, and blog posts were painstakingly formatted with HTML. This setup was time-consuming and discouraged me from producing content regularly.

After a year of struggling with this setup, I decided to build a new site using my existing knowledge of HTML, CSS, JavaScript, React, and AWS. My old site was slow, with a frustrating load time of 3.7 seconds on a 100 Mb/s connection. I knew I needed a change.

On January 10th, 2022, I started researching alternatives and settled on a new tech stack that included React (front-end), Chakra (front-end+), Hugo, Netlify, and AWS. I had previous experience with React and Chakra, which minimized the learning curve. Hugo, a static site generator, allows for easy blog creation and deployment, with content written in Markdown.

Netlify, a popular platform for building, testing, and deploying websites, seemed like a natural choice for hosting the site. I also considered Cloudflare Pages but ultimately chose Netlify based on developer feedback.

To organize the development process, I created a Trello board and divided the project into phases: Home, Blog, Media (Books, Bookmarks), and Art (Drawings, Photosets). I took inspiration from several well-known sources in the nerd blogosphere and aimed to create a personal shrine of sorts.

While researching Hugo, I stumbled upon the term “Jamstack” – a modern web development architecture based on JavaScript, APIs, and Markup (JAM). I decided to incorporate this approach into my project, using HTML, CSS, and Tailwind, a utility-first CSS framework for rapid website development.

My final tech stack consisted of Hugo, Tailwind, Netlify, and AWS (for hosting photo sets and domain routing). This modern stack came with its challenges, but learning these technologies and combining them into a functional website proved to be an enjoyable and rewarding project.

As I embarked on this journey to rebuild my website, I realized that adopting the Jamstack approach would mean letting go of React and working with plain HTML and CSS. Although it had been quite some time since I had built a front-end project without React, I was up for the challenge.

Tailwind CSS caught my attention with its promise to rapidly build modern websites without ever leaving HTML. I was sold on this idea and eager to dive into this new technology.

With my new stack in place – Hugo, Tailwind, Netlify, and AWS – I began working on my website, following the development phases I had outlined on my Trello board.

The Home phase focused on creating an engaging and visually appealing homepage that would serve as the entry point for visitors. I paid close attention to design, layout, and ease of navigation, ensuring that users could quickly access the content that interested them.

Next, I tackled the Blog phase. Using Hugo’s built-in features, I streamlined the process of creating and updating blog posts with Markdown. This approach made it much easier to produce and manage content, compared to the tedious HTML formatting of my previous site.

During the Media phase, I concentrated on incorporating various resources, such as books and bookmarks, into the website. I aimed to make these elements easily accessible and organized for visitors seeking specific information or content.

Finally, in the Art phase, I focused on showcasing drawings and photosets. AWS played a significant role here, providing the necessary storage for these large files.

Throughout the entire process, I learned and adapted to new technologies, enhancing my skill set and understanding of modern web development practices. The result was a fast, sleek, and user-friendly website that met my initial goals.

In summary, the experience of rebuilding my website using this modern tech stack proved to be both educational and fulfilling. By overcoming various obstacles and learning from available resources, I created a website that is easier to work with, faster, and more future-proof. It’s a testament to the power of embracing new technologies and stepping outside one’s comfort zone.